<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>个人购物车</title>
    <!-- 引入element-ui样式 -->
    <link rel="stylesheet" href="../../../plugins/element-ui/index.css">
    <style>
        a{
            text-decoration: none;
        }
        .box2{
            /*position: absolute;*/
            width: 100%;
            height: 180px;
            margin-top: 0px;
            margin-left: 0px;
        }
        .box3{
            position: absolute;
            width: 500px;
            height: 450px;
            /*background-color: red;*/
            margin: -500px 510px 0;
        }
        .box3  h1:nth-child(1){
            color: white;
            font-size: 80px;
            text-align: center;
            font-family: 'beyond_the_mountainsregular', sans-serif;
        }
    </style>

    <!--    上传图片样式-->
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <!--背景图大蒙板-->

    <div class="box2" style="">
        <el-menu
                class="el-menu-demo"
                mode="horizontal"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
            <el-menu-item index="1" @click="url(1)">主页</el-menu-item>
            <el-submenu index="2">
                <template slot="title">菜品信息</template>
                <el-menu-item index="2-1"  @click="url(2)">全部</el-menu-item>

                <el-row :span="8" v-for="item in options1" :key="o" :offset="index > 0 ? 2 : 0">
                    <el-menu-item  @click="url(2)">{{item.flavorType}}</el-menu-item>
                </el-row>

            </el-submenu>
            <el-menu-item  index="3" @click="url(3)">个人购物车</el-menu-item>
            <el-menu-item  index="4" @click="url(4)">个人订单</el-menu-item>
            <el-menu-item  index="6" @click="url(6)">个人订单详情</el-menu-item>
            <el-submenu style="margin: 0 0 0 800px" index="5">
                <template slot="title">
                    {{userInfo.data.username}}
                </template>
                <el-menu-item index="5-1"  @click="url(5)">退出登录</el-menu-item>
            </el-submenu>
        </el-menu>
    </div>

    <div style="margin: -180px 0 0 0; background: #000;">
        <img style="opacity:0.6; filter: alpha(opacity=60); width: 100%;height: 800px" src="../../img/hero_bg_3.jpg"/>
    </div>

    <div class="box3">
        <h1>个人购物车</h1>
    </div>

    <div style="width: 95%;height: 5px;background-color: #8c939d;margin: 100px 0 0 50px "></div>
    <h1 style="margin: 10px 0 0 600px">个人购物车</h1>

    <div style="position:absolute;margin:100px 0 0 70px;width: 90%;height: 800px;background-color: whitesmoke" stripe highlight-current-row>
        <el-table  size="medium" current-row-key="id"  :data="dataList" stripe highlight-current-row>
            <el-table-column type="index" align="center" label="序号"></el-table-column>
            <el-table-column prop="image" label="图片" align="center">

                <template slot-scope="{ row }">
                    <img style="width: auto; height: 2px; border:none;cursor: pointer;"
                         :preview-src-list=" `/files/downloadFile?name=${row.image}` "
                         :src="getImage(row.image)"
                    />
                    <div slot="error" class="image-slot">
                        <img :src="imageUrl1"  style="width: auto; height: 40px; border:none;" >
                    </div>
                </template>

            </el-table-column>
            <el-table-column prop="name" label="菜名" align="center"></el-table-column>
            <el-table-column prop="price" label="单价" align="center"></el-table-column>
            <el-table-column prop="number" label="数量" align="center"></el-table-column>
            <el-table-column prop="total" label="总价" align="center"></el-table-column>
            <el-table-column prop="remarks" label="备注" align="center"></el-table-column>


            <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="Up_Add_dialogShow(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="DeleteShopCar(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页组件-->
        <el-pagination
                class="pagination"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>

        <!--修改弹框-->
        <el-dialog :title="title" style="height: 800px"  :visible.sync="dialog_update">
            <el-form :model="formData_update" :rules="rules" ref="formData_update" label-width="100px" class="demo-formData_update">
                <el-form-item  label="备注：" prop="remarks">
                    <el-input v-model="formData_update.remarks"></el-input>
                </el-form-item>
                <el-form-item  label="数量：" prop="number">
                    <el-input-number v-model="formData_update.number" @change="handleChange" :min="1" :max="20" label="选择数量"></el-input-number>
                </el-form-item>

                <el-form-item  label="价格：" prop="price">
                    <h1 style="margin-top: -3px"> ￥{{total}}</h1>
                </el-form-item>


                <el-form-item  label="照片：" prop="image">
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="updateShopCar">修改</el-button>
                    <el-button @click="center">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <div style="margin: 100px 0 0 1000px">
            <table border="1"  bordercolor="#00CCCC"  width="300"   >
                <tr>
                    <th>总价</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>￥{{totalPrice}}</td>
                    <td><el-button style="margin-left: 80px" type="success" @click="Buy">结算</el-button></td>
                </tr>
            </table>
        </div>
    </div>


</div>


<script src="../../../plugins/vue/vue.js"></script>

<!-- 引入element-ui组件库 -->
<script src="../../../plugins/element-ui/index.js"></script>

<!-- 引入axios -->
<script src="../../../plugins/axios/axios.min.js"></script>

<script>
    new Vue({
        el:'#app',    //element
        data:{
            dataList:{},
            userInfo:{},

            pagination: {
                //分页相关模型数据 1
                currentPage: 1,//当前页码1
                pageSize:5,//每页显示的记录数1
                total:0,//总记录数1
            },

            //修改备注弹框
            formData_update:{},
            dialog_update:false,

            //总价
            total:"",
            totalPrice:0,  //购物车所有物品总价

            //菜品类型
            options1:[{}],

            //自定义一个form表单（添加订单表用）
            formData:{},


            imageUrl:""
        },
        created() {
            const userInfo = window.localStorage.getItem('user')
            console.log("userInfo1:::"+userInfo)
            if (userInfo) {
                this.userInfo = JSON.parse(userInfo)
            }
            console.log("userInfo2:::"+userInfo)


            //所有分类查询
            axios.get("/flavors/getAllFlavor").then((res)=> {
                console.log("所有分类查询")
                console.log(res)
                this.options1=res.data.data
            })

            this.getAll();
        },
        methods:{
            url(index){
                if (index==1){
                    window.location.href='../User.html'
                }else if(index==2){
                    window.location.href='typeList.html'
                }else if(index==3){
                    window.location.href='shopCar.html'
                }else if(index==4){
                    window.location.href='orders.html'
                }else if(index==5){
                    window.location.href='../../login/UserLogin.html'
                }else if(index==6){
                    window.location.href='ordersList.html'
                }
            },
            getAll(){
                parent ="?userId="+this.userInfo.data.id;

                axios.get("/shopCars/getPageShopCar/"+this.pagination.currentPage+"/"+this.pagination.pageSize+"/"+this.userInfo.data.id).then((res)=>{

                    this.dataList=res.data.data.records
                    this.pagination.total=res.data.data.total
                })

                //计算总价 totalPrice
                axios.get("/shopCars/sumTotal/"+this.userInfo.data.id).then((res)=>{
                    this.totalPrice=res.data.data.total
                })
            },
            //切换页码
            handleCurrentChange(currentPage) {
                console.log("切换页码:")
                this.pagination.currentPage=currentPage;
                console.log(currentPage)
                this.getAll();
            },

            //修改弹框的显示和隐藏
            Up_Add_dialogShow(row){

                //数据回显
                this.formData_update = row
                this.imageUrl = `/files/downloadFile?name=${row.image}`
                this.total=this.formData_update.number*this.formData_update.price
                //弹框显示
                this.dialog_update=true
            },

            //确定修改
            updateShopCar(){
                axios.put("/shopCars/updateShopCar",this.formData_update).then((res)=>{     //修改数据回显
                    if (res.data.code){
                        this.$message.success(res.data.msg)
                    }else{
                        this.$message.error(res.data.msg)
                    }
                }).finally(()=>{
                    this.getAll();
                    this.dialog_update=false;
                })
            },

            DeleteShopCar(row){
                console.log("row")
                console.log(row)


                this.$confirm("此操作删除此条购物，是否继续?","提醒",{type: 'info'
                }).then(()=>{
                    axios.delete("/shopCars/deleteShopCar/"+row.id).then((res)=>{     //修改数据回显
                        if (res.data.code){
                            this.$message.success(res.data.msg)
                        }else{
                            this.$message.error(res.data.msg)
                        }
                    }).finally(()=>{
                        this.getAll()
                    })
                }).catch(()=>{
                    //取消删除
                    this.$message.info("取消删除操作")
                })
            },

            center() {
                this.dialog_update=false
                this.dialog_add=false
                this.$message.info("取消操作")
                this.getAll()
            },


            //改变数量
            handleChange(value){
                //初始值
                this.total=this.formData_update.price

                this.total=value*this.formData_update.price

                this.formData_update.total=this.total
            },

            //确定购买(加入订单表和明细表)  购买完毕清空当前用户购物车
            Buy(){
                this.$confirm("是否结算?","提醒",{type: 'info'
                }).then(()=>{

                    axios.get("/shopCars/getAll/"+this.userInfo.data.id).then((res)=>{
                        console.log("===============")
                        console.log(res)
                        console.log(res.data.data.length<=0)
                        console.log("===============")
                        if (res.data.data.length<=0){
                            this.$message.error("购物车为空，请先添加商品")

                        }else {
                            this.formData.userId=this.userInfo.data.id
                            this.formData.total=this.totalPrice
                            axios.post("/orders/add",this.formData).then((res)=>{
                                if (res.data.code){
                                    axios.post("/ordersLists/addlist",res.data.data).then((res)=> {
                                        if (res.data.code){
                                            this.$message.success("结算完成")
                                            this.deleteAllByUserId()
                                        }
                                    })
                                }else {
                                    this.$message.error(res.data.msg)
                                }
                            })
                        }

                    }).catch(()=>{
                        //取消删除
                        this.$message.info("取消删除操作")
                    })
                })

            },


            deleteAllByUserId(){
                axios.delete("/shopCars/deleteAllByUserId/"+this.userInfo.data.id).then((res)=> {
                    if (res.data.code){
                        this.$message.success(res.data.msg)
                    }else {
                        this.$message.error(res.data.msg)
                    }
                }).finally(()=>{
                    this.getAll()
                })
            },
            changeFlavor(row){
                if (row!=='全部'){
                    this.bigTitle=row.flavorType
                    parent ="?flavorType="+row.flavorType;
                    axios.get("/dishs/getByFlavorType"+parent).then((res)=>{
                        this.options2=res.data.data
                    })
                }else {
                    this.getAll()
                }
            },

            getImage(image) {
                this.imageUrl1= `/files/downloadFile?name=${image}`
            },
        }

    })
</script>
</body>
</html>